<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/cart.css">
    <script src="./js/cart.js"></script>
</head>

<body>
    <div class="cart-layout layout">
        <!-- 头部 -->
        <div class="cart-header header">
            <a href="#" class="back jd-sprite"></a>
            <h4>购物车</h4>
            <a href="#" class="menu jd-sprite"></a>
        </div>
        <!-- 安全模块 -->
        <div class="cart-safe">
            <p>您正在安全的购物环境中，请放心购买！！</p>
        </div>
        <!-- 商品模块 -->
        <div class="cart-product">
            <div class="p-title">
                <a href="#" class="check  jd-sprite"></a>
                <span class="logo fl jd-sprite"></span>
                <span class="text fl">京东自营</span>
                <span class="free fr">您可享受满79免运费服务</span>
            </div>
            <div class="p-main">
                <div class="item">
                    <!-- 复选框 -->
                    <a href="#" class="check  jd-sprite"></a>
                    <div class="content">
                        <img src="./images/detail01.jpg" alt="" class="detail">
                        <div class="info">
                            <p class="text">南极人睡衣女夏季新款棉服质量短袖睡衣居家，南极人睡衣女夏季新款棉服质量短袖睡衣居家</p>
                            <div class="options">
                                <div class="num fl">
                                    <span>-</span>
                                    <input type="text" value="0">
                                    <span>+</span>
                                </div>
                                <div class="delete fr">
                                    <span class="del-up"></span>
                                    <span class="del-down"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <!-- 复选框 -->
                    <a href="#" class="check  jd-sprite"></a>
                    <div class="content">
                        <img src="./images/detail01.jpg" alt="" class="detail">
                        <div class="info">
                            <p class="text">南极人睡衣女夏季新款棉服质量短袖睡衣居家，南极人睡衣女夏季新款棉服质量短袖睡衣居家</p>
                            <div class="options">
                                <div class="num fl">
                                    <span>-</span>
                                    <input type="text" value="0">
                                    <span>+</span>
                                </div>
                                <div class="delete fr">
                                    <span class="del-up"></span>
                                    <span class="del-down"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <!-- 复选框 -->
                    <a href="#" class="check  jd-sprite"></a>
                    <div class="content">
                        <img src="./images/detail01.jpg" alt="" class="detail">
                        <div class="info">
                            <p class="text">南极人睡衣女夏季新款棉服质量短袖睡衣居家，南极人睡衣女夏季新款棉服质量短袖睡衣居家</p>
                            <div class="options">
                                <div class="num fl">
                                    <span>-</span>
                                    <input type="text" value="0">
                                    <span>+</span>
                                </div>
                                <div class="delete fr">
                                    <span class="del-up"></span>
                                    <span class="del-down"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 模态框 -->
        <div class="win-box">
            <!-- 删除 -->
            <div class="del-box animated">
                <p>确定删除该商品吗?</p>
                <div class="btn-box">
                    <a href="#" class="no fl">取消</a>
                    <a href="#" class="yes fr">确定</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>